<template>
  <div class="change_data">



    <van-cell-group class="wrap_input">
      <van-field @click="show_start = true" :rules="rule" v-model="time_data" :label="`${txt_tip}`"
        :placeholder="`请输入${txt_tip}`">
        <template v-if="is_require" #right-icon>
          <span style="color:red;font-size:20px">*</span>
        </template>
      </van-field>
    </van-cell-group>

    <van-popup round v-model="show_start" position="bottom" get-container="#app">
      <van-datetime-picker :min-date="minDate" @change="changeCalendar" @confirm="saveCalendar" v-model="now_date" style="z-index: 9999"
        type="datetime" :title="`选择${txt_tip}`" />
      <!-- <calendar :closeByClickMask="true" :defaultDate="now_date"
        :minDate=" is_min_date?now_date:new Date('2000-12-31') " style="z-index: 9999" @change="changeCalendar"
        :show.sync="show_start"></calendar> -->
    </van-popup>
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    name: 'InputTime',
    model: {
      prop: 'time',
      event: 'update_time',
    },
    watch: {
      time: {
        handler: function (value) {
          this.time_data = value;
        },
        deep: true,
        immediate: true,
      }
    },
    props: {
      is_require: {
        type: Boolean,
        default: true
      },
      txt_tip: {
        type: String,
        default: '消费时间',
      },
      time: {
        type: String,
        default: '',
      },
      icons: {
        type: String,
        default: '',
      },
      is_min_date: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        show_start: false,
        time_data: '',
        now_date: '',
        minDate: new Date(2022,0,1),
        rule: [{
          required: true,
          message: `日期必填`
        }]
      }
    },
    mounted() {
      // debugger;
      this.time_data = this.time;
      this.now_date = this.time;
      this.rule = this.is_require ? this.$options.data().rule : [];
    },
    methods: {
      changeCalendar(val) {
        console.log(val)
        // this.time_data = val.format('YYYY-MM-DD');
        this.time_data = moment(this.now_date).format('YYYY-MM-DD HH:mm:ss')
        this.$emit('update_time', this.time_data)
      },
      saveCalendar() {
        if (this.time_data) {
          this.$emit('update_time', this.time_data)
        } else {
          this.$emit('update_time', moment(new Date()).format('YYYY-MM-DD HH:mm:ss'))
        }
      }
    },
    
  }
</script>

<style lang="less" scoped>
  /deep/.van-field {
    align-items: center;
  }

  /deep/.van-field__label {
    height: 100%;
    line-height: 100%;
  }

  /deep/.van-field__label span {
    display: inline-block;
    height: 100%;
    line-height: 100%;
  }

  .change_data {
    font-size: 28px;
    line-height: 100px;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .wrap_input {
      margin: 30px auto 0px;
      width: 75%;
    }




    .icon_size {
      width: 26px;
      height: 26px;
      margin-right: 12px;
    }
  }
</style>